iT邦幫忙

2023 iThome 鐵人賽

DAY 29
0
Mobile Development

攜手神隊友ChatGPT:攝護腺自我照護App開發歷程!系列 第 29

D29-解碼Flutter官方文件,一起來了解Beyond UI的設計: 所有Section摘要

  • 分享至 

  • xImage
  •  

Part1: 今日目標

1.前言
2.內容: 剩餘所有Beyond UI的設計(Section_2 ~ Section_11)
3.總結

Part2: 今日內容

1.前言

今天來到鐵人賽倒數兩天,也是文章內容的最後一篇,今天會瀏覽並總結官方文件各個網頁的內容,詳細文章都有附上對應的網址,再請大家依照自己有需求的部分,詳細瀏覽文件囉!

2.內容:

Part_4: Beyond UI

Section_2. Platform integration

  • Supported platforms 支援的平台
    這個網頁列出了Flutter支援的平台,並將這些平台分為三個支援層級:支援的(Supported)、最大努力支援的(Best effort)和不支援的(Unsupported)。支援的平台經過Google的測試並在每次提交時進行持續集成測試。Best effort平台是Flutter團隊打算通過編碼實踐來支援的,但只是偶爾進行測試。Unsupported平台是不進行測試或支援的。

  • Build desktop apps with Flutter 使用Flutter構建桌面應用
    這個網頁指導開發者如何使用Flutter來編譯原生的Windows、macOS或Linux桌面應用。Flutter的桌面支持也擴展到插件,可以安裝支持Windows、macOS或Linux平台的現有插件,或者創建自己的插件。網頁提供了詳細的步驟,包括環境設置、項目創建和插件使用,以及如何為特定平台生成發布構建。

  • Write platform-specific code 撰寫特定平台的程式碼
    這個網頁教導開發者如何撰寫自定義的特定平台程式碼。Flutter使用一個靈活的系統,允許開發者呼叫特定平台的API,這些API可以直接與以下語言協作:Android上的Kotlin或Java,iOS上的Swift或Objective-C,Windows上的C++,macOS上的Objective-C,以及Linux上的C。此外,Flutter還提供了一個名為Pigeon的包,用於通過程式碼生成發送結構化的類型安全消息。這個指南展示了如何使用平台通道在不同平台上呼叫原生API,並通過一個簡單的例子展示了如何獲取和顯示當前的電池水平。

  • Automatic platform adaptations 自動平台適應
    這個網頁詳細介紹了Flutter如何自動適應Android和iOS的不同平台特性。這包括導航轉換、滾動行為、字體選擇、圖標顯示和觸感反饋等。Flutter提供了Android和iOS上看到的導航模式,並且還會自動調整當前平台的導航動畫。此外,滾動是平台外觀和感覺的重要部分,Flutter會自動調整滾動行為以匹配當前平台。在使用Material包時,字體和圖標會根據平台自動顯示不同的圖形。此外,Material和Cupertino包會在某些場景下自動觸發適合平台的觸感反饋。


Section_3. Packages & plugins

  • Use packages & plugins 使用套件和插件
    此網頁教導開發者如何在Flutter中使用共享套件,這些套件由其他開發者貢獻,以快速構建應用。它涵蓋了如何添加、移除和管理套件依賴,並提供了具體的例子和步驟,例如使用css_colors和url_launcher套件。此外,還探討了版本衝突和如何解決,以及如何使用未發布在pub.dev上的套件。

  • Develop packages & plugins 開發套件和插件
    此網頁為開發者提供了開發Flutter套件和插件的詳細指南。它涵蓋了創建和實現Dart套件和插件包的步驟,並介紹了如何使用Federated插件來分割不同平台的支持到單獨的包中。此外,它還提供了關於如何測試插件和如何為套件添加文檔的資訊。這些指南和資訊對於希望開發和分享Flutter套件和插件的開發者來說非常有用。

  • Flutter Favorites
    Flutter Favorites計劃旨在識別應在構建應用時首先考慮的套件和插件。這不是質量或適用性的保證,開發者應對項目進行自己的評估。Flutter Favorites套件在pub.dev上有完整列表,並已通過高質量標準,包括整體套件得分、許可證、GitHub版本標籤、功能完整性、出版商驗證、一般可用性、運行時行為和依賴質量。Flutter生態系統委員會由Flutter團隊成員和社區成員組成,負責決定套件何時達到成為Flutter Favorite的質量標準。

  • Package repository
    這個網站是Flutter的套件存儲庫,提供了大量的Flutter套件,如shared_preferences、http、url_launcher等,供開發者搜索和使用。這些套件涵蓋了各種功能,如HTTP請求、圖像選擇、權限處理等。開發者可以根據需要,查找並選擇合適的套件來加速應用開發。每個套件都有詳細的描述、版本資訊和相關鏈接,方便開發者了解套件的功能和使用方法。


Section_4. Testing & debugging

  • Testing overview
    這個網頁提供了Flutter應用的測試概覽。自動化測試分為幾個類別:單元測試(unit test)針對單一函數、方法或類進行測試;小部件測試(widget test)測試單一小部件;整合測試(integration test)測試完整的應用或應用的大部分。一個經過良好測試的應用會有許多單元和小部件測試,並有足夠的整合測試來覆蓋所有重要的使用案例。此外,這個網頁還探討了持續集成(Continuous integration)服務,這些服務允許開發者在推送新的程式碼變更時自動運行測試。

  • 其他細節,官方文件都有詳細說明,包括: Widget testing、Integration testing、Unit testing、Test a plugin、Handle plugin code in tests、Debugging tools、Debug your app programmatically、Use a native language debugger、Flutter's build modes、Common Flutter errors、Handle errors 和 Report errors to a service


Section_5. Performance & optimization

  • Overview
    這個網頁是Flutter性能和優化的總覽,提供了一個入口或資源樹,來解答有關性能的所有問題。它主要回答了如何改善性能的問題,並提供了各種工具和API來獲取性能指標。此外,它將性能問題劃分為四個類別:速度、內存、應用大小和能源,並根據這四個類別組織內容。

  • Impeller
    Impeller是Flutter的新渲染引擎,旨在解決Flutter的早期卡頓問題。它在構建時預編譯一套更小、更簡單的著色器,避免了運行時編譯。Impeller的目標包括提供可預測的性能、可標記的資源、可攜帶性,並利用現代圖形API和多線程。目前,iOS預設啟用Impeller,macOS也在預覽中提供,而Android的開發仍在進行中。

  • Performance best practices
    這個網頁提供了Flutter性能最佳實踐的指南,幫助開發者有效地渲染場景並確保由框架生成的繪畫程式碼盡可能高效。它強調了一些運算成本較高的操作,並提供了設計和實現UI的建議,以避免在build()方法中進行重複和昂貴的工作。此外,它還探討了如何避免使用saveLayer()進行昂貴的操作,並提供了有關透明度和剪切的建議,以及如何避免觸發不必要的saveLayer調用。

  • App size
    這個網頁關注於Flutter應用的大小。由於Flutter應用是自包含的,包含運行應用所需的所有程式碼和資源,因此其大小可能會成為一個關注點。應用越大,它在設備上所需的空間就越多,下載所需的時間也越長。這個網頁提供了測量應用大小的方法,並提供了一些減小應用大小的建議,例如移除未使用的資源,壓縮PNG和JPEG文件等。此外,從Flutter 1.22版本和DevTools 0.9.1版本開始,包含了一個大小分析工具,以幫助開發者了解他們的應用的發布構建的結構。

  • Deferred components
    這個網頁介紹了Flutter中的延遲組件(Deferred components),這是一種能夠在運行時下載額外的Dart程式碼和資源的功能,允許應用減小安裝apk的大小,並在用戶需要時下載特性和資源。每個可以單獨下載的Dart庫和資源的包被稱為“延遲組件”。這是通過使用Dart的延遲導入來實現的,這些導入可以被編譯成分割的AOT共享庫。儘管模塊可以被延遲加載,但整個應用必須完全構建並作為單一的Android App Bundle上傳。該網頁提供了如何為Android應用設置延遲加載的詳細指南,包括如何添加Play Core到Android應用的build.gradle依賴中,如何支持SplitCompat,以及如何提供PlayStoreDeferredComponentManager的實例等。

  • 其他細節,官方文件都有詳細說明,包括: Rendering performance、Performance profiling、Performance profiling for web、Shader compilation jank、Performance metrics、Performance FAQ 和 Appendix


Section_6. Deployment

  • Obfuscate Dart code
    此網頁介紹了如何混淆Dart程式碼,使其更難以被人類理解,從而提高應用的安全性。混淆會隱藏編譯後的Dart程式碼中的函數和類名。混淆不會加密資源,也不會防止反向工程。Flutter的程式碼混淆僅在發布構建中工作。使用--obfuscate和--split-debug-info選項進行混淆,並保存符號文件以便於日後的堆棧跟踪解讀。

  • Create flavors of an app
    此網頁指導開發者如何為iOS和Android設置Flutter的flavors。Flavors允許開發者使用相同的程式碼庫為應用創建不同的環境,例如,製作免費和付費版本的應用。Flavors讓開發者定義編譯時配置並在運行時設置參數以自定義應用的行為。本文概述了如何在Xcode中定義構建配置,如何在Android的build.gradle文件中設置,以及如何修改Dart程式碼來使用flavors。

  • Build and release an Android app
    此網頁提供了一個詳細的指南,指導開發者如何構建和發布Android應用。它涵蓋了設置應用圖標、啟用Material Components、簽名應用、創建上傳密鑰、配置Gradle以及使用R8縮減程式碼等步驟。此外,它還提供了有關如何構建應用包(APK)和應用束(AAB)的資訊,並解釋了如何將應用發布到Google Play商店,包括更新應用的版本號。此頁還包含了常見問題解答,幫助解決開發者在構建和發布過程中可能遇到的問題。

  • Set up continuous deployment
    此網頁提供了如何設置Flutter的持續部署(CD)的指南,以確保開發者的應用能夠經常被交付給beta測試者並在不依賴於手動工作流的情況下進行驗證。它涵蓋了使用不同持續集成(CI)和持續交付(CD)選項,如Codemagic、Bitrise、Appcircle等,以及如何與fastlane等工具集成。此外,它還提供了本地設置和雲構建和部署設置的指南,並解釋了如何保護敏感數據和登錄憑證。此頁面還包含了如何創建和運行Fastfile腳本以及如何在CI系統上配置和運行持續部署的詳細資訊。

  • 也有提供其他平台的說明: iOS app、macOS app、Linux app、Windows app、web app。


Section_7. Add to an existing app

  • Introduction
    這個網頁介紹了如何將Flutter整合到現有的應用中。Flutter可以作為一個庫或模塊被一部分一部分地整合到現有應用中,不論是Android或iOS應用。這允許開發者在原生和Flutter螢幕之間進行混合導航,或在一個頁面中使用多個部分螢幕的Flutter視圖。該頁面提供了有關如何在Android和iOS中實現此類整合的具體指南和範例。

  • 其他資訊,包括: Add to an Android app、Add to an iOS app、 Debug embedded Flutter module、Add multiple Flutter instances 和 Loading sequence and performance,請進一步參考官方文件。


Section_8. Tools & editors

  • Android Studio & IntelliJ
    這個網頁為開發者提供了如何在Android Studio和IntelliJ中使用Flutter插件的指南,以及如何配置和使用這些工具來開發Flutter應用。它包含了如何使用快捷鍵、模板、熱重載等功能,並提供了一些常見問題的解決方案。此外,還介紹了如何開啟和編輯Android模組,以及如何設置和使用Android SDK。

  • Visual Studio Code
    這個網頁為開發者提供了如何在Visual Studio Code中配置和使用Flutter插件的指南。它涵蓋了創建新項目、打開現有項目、編輯程式碼、運行和調試等方面的內容。此外,還介紹了如何使用快捷鍵、程式碼片段、熱重載和熱重啟等功能,以及如何進行高級調試和解決已知問題。

  • DevTools: Overview
    DevTools是一套為Dart和Flutter提供的性能和調試工具套件。它允許開發者檢查Flutter應用的UI佈局和狀態,診斷UI性能問題,進行CPU分析,網絡分析,源級調試,以及查看運行中的Flutter或Dart命令行應用的日誌和診斷資訊。此外,它還提供了程式碼和應用大小分析工具。DevTools可與現有的IDE或基於命令行的開發工作流結合使用。

  • SDK overview
    Flutter SDK 包含了開發者需要開發跨平台Flutter應用的包和命令行工具。它包括Dart SDK、專為文本優化的2D渲染引擎、現代反應式框架、實現Material Design和iOS風格的豐富小部件集、單元和集成測試的APIs、連接系統和第三方SDKs的Interop和插件APIs、以及用於在Windows、Linux和Mac上運行測試的無頭測試運行器。此外,還提供了Dart DevTools和flutter和dart命令行工具,用於創建、構建、測試和編譯應用。

  • Flutter's pubspec options
    這個網頁詳細介紹了Flutter項目中的pubspec.yaml文件,該文件包含了項目的元數據,如項目依賴、字體、圖像文件等。pubspec.yaml文件是以YAML格式編寫的,它指定了項目所需的依賴包及其版本、開發者包的依賴、Flutter SDK的版本約束等。此外,該頁面還提供了Flutter項目的pubspec.yaml文件的範例,並突出顯示了僅適用於Flutter項目的字段。

  • Automated fixes
    這個網頁介紹了Flutter的自動修復工具,該工具幫助開發者清理程式碼庫中的已棄用API。此工具作為Flutter所提供,會建議開發者對特定程式碼進行調整。該工具可以從命令行使用,也集成到了Android Studio和Visual Studio Code的IDE插件中。當分析器檢測到一個已棄用的API時,會在該行程式碼上出現一個燈泡圖標,點擊燈泡會顯示建議的修復,點擊建議的修復會進行更新。此外,開發者還可以使用命令行工具dart fix來查看或應用對整個項目的更改。

  • Code formatting
    此網頁介紹了如何在VS Code、Android Studio和IntelliJ中自動格式化程式碼,以及如何使用dart命令在命令行界面中糾正程式碼格式。它強調了使用尾隨逗號來獲得良好的自動格式化,並提供了相關的程式碼示例。此外,該頁面還討論了為何開發團隊應該選擇使用單一共享風格並通過自動格式化來強制執行此風格。


Section_9. Flutter concepts

  • Architectural overview
    這個網頁提供了Flutter架構的概覽,包括其設計的核心原則和概念。Flutter是一個跨平台的UI工具包,旨在允許程式碼在不同的操作系統如iOS和Android上重用,同時允許應用直接與底層平台服務接口。這個概覽分為多個部分,包括層模型、小部件的介紹、渲染過程、平台嵌入器的概覽、與其他程式碼的集成,以及對Web的支持。

  • Inside Flutter
    此網頁深入探討了Flutter工具包的內部運作,揭示了使Flutter的API成為可能的各種機制。Flutter小部件通過積極的組合來構建,因此用Flutter構建的用戶界面具有大量的小部件。為了支持這種工作負載,Flutter使用了一系列高效的算法和優化,包括子線性算法用於佈局和構建小部件,以及使樹手術高效的數據結構。該設計還使開發人員能夠使用回調輕鬆創建無窮滾動列表,這些回調僅構建對用戶可見的那些小部件。

  • Understanding constraints
    此網頁深入解釋了Flutter中的約束概念。在Flutter中,約束由父小部件下發給其子小部件,每個約束包含最小和最大的寬度和高度。小部件會根據這些約束來決定自己的大小。此外,小部件不能知道並且不決定其在螢幕中的位置,這是由其父小部件決定的。這個頁面強調了Flutter的一次性過程設計,這意味著Flutter能夠非常高效地佈局其小部件,但也帶來了一些限制,例如小部件只能在其父約束允許的範圍內決定其大小。

  • Flutter's build modes
    此網頁詳細介紹了Flutter的三種構建模式:debug模式、profile模式和release模式,以及用於測試的無頭模式。debug模式用於開發,支持熱重載和源級調試;release模式用於部署應用,最大化優化並最小化足跡大小;profile模式保留了一些測試功能,足以分析應用的性能。此外,網頁還提供了關於如何選擇和使用這些模式的具體指南和建議。

  • Hot reload
    此網頁詳細介紹了Flutter的熱重載(Hot reload)功能。熱重載通過將更新的源程式碼文件注入到運行中的Dart虛擬機(VM)中來工作,允許開發者快速和輕鬆地實驗、構建UI、添加功能和修復錯誤。Flutter框架會自動重建小部件樹,讓開發者能夠迅速查看變更的效果。熱重載支持在debug模式下的Flutter應用,並且可以在支持的Flutter編輯器或終端窗口中運行應用來使用。此外,網頁還提供了有關如何使用熱重載、特殊情況和其工作原理的詳細資訊。


Section_10. Resources

  • FAQ
    此網頁是Flutter的常見問題集,收集了關於Flutter的一些常見問題和答案,包括Flutter的定義、使用對象、支持平台、開發語言、性能等方面的內容,為開發者提供了豐富的資訊來源。

  • Learn Dart
    這個網頁是一個學習Dart語言的入門資源,提供了多種有助於快速學習Dart的資料和工具。網頁中包含了Dart語言的特性介紹,例如強類型、閉包、庫、詞法範疇、頂級函數、命名參數、async / await等。還有一個Library tour,介紹了Dart的核心庫,涵蓋了集合、異步、數學、數字、字符串、JSON等。此外,網頁還提供了針對JavaScript開發者的Dart學習資源,以及如何寫異步程式碼和使用流進行異步I/O和事件處理的教程。對於有興趣深入學習和參與貢獻的人,網頁還提供了加入Dart社群的連結。

  • Create useful bug reports
    這個網頁提供了創建有用的錯誤報告的詳細指南,以便於Flutter團隊更快地診斷和解決問題。它包含了如何創建和提交包含最小可重現程式碼樣本的GitHub問題,如何提供Flutter診斷信息,以及如何在詳細模式下運行命令。此外,它還提供了如何獲取和提交相關日誌和崩潰報告的指南。

  • Contribute to Flutteropen_in_new
    此網址為Flutter的貢獻指南,涵蓋了如何加入Flutter團隊並作出貢獻的各種方式,包括編寫程式碼、提交問題報告、協助文檔編寫、進行品質保證測試等。該指南提供了設置開發環境、提交PR、程式碼審查等過程的詳細信息,並強調了遵循行為準則和尊重社區規範的重要性。此外,還有一些有關如何進行開發者關係和社區互動的建議。

  • Design documents
    導向了標有“design doc”標籤的Flutter GitHub issues。這些issues包含Flutter的設計文檔,對於了解Flutter的設計和開發過程有幫助。

  • Toolkit

    • Casual Games Toolkit
      此工具包提供了開發休閒遊戲所需的資源和工具,協助開發者利用Flutter創建遊戲應用。
    • Flutter News Toolkit
      此工具包為開發者提供了開發新聞相關應用的資源和工具,幫助開發者使用Flutter開發新聞應用。
  • 其他資源: Books、Videos、Courses


Section_11. Reference

  • Who is Dash?
    此網址介紹了Dash,Flutter的吉祥物。Dash是一個代表Flutter社區的小恐龍,象徵著快速、靈活和友好。

  • Widget index
    此網址提供了Flutter中所有可用小部件的索引,方便開發者查找和瞭解各種小部件的用途和功能。

  • API referenceopen_in_new
    此網址是Flutter的API參考文檔,提供了Flutter框架中所有API的詳細信息,包括類、函數、屬性等,是開發者進行Flutter開發時的重要參考資源。

  • flutter CLI reference
    此網址提供了flutter命令行工具的參考資料,包含了所有可用的命令、選項和用法,幫助開發者更有效地使用flutter CLI進行開發。

3.總結

最後10天的文章比自己原先規畫還要hard core,文件內容真的非常非常繁多,但也代表開發者能針對開發需求找到對應的解決建議,而在時間有限下,自己選取感興趣的內容做摘要說明,期望在未來開發之路上,能對整個Flutter框架和Dart語言掌握的更加清楚,那我們明天(鐵人賽最後一天)見啦!!!

健康和才智是人生的兩大幸福
Health and intellect are the two blessings of life.


上一篇
D28-解碼Flutter官方文件,一起來了解 Styling widgets和Beyond UI的設計: Data & backend
下一篇
D30-2023完賽心得
系列文
攜手神隊友ChatGPT:攝護腺自我照護App開發歷程!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言